<template>
  <div class="edit-header">
    <p>手动投放</p>
  </div>
  <a-form ref="formRef" :disabled="isDisabled" style="min-width: 900px" :model="editSpCampaignInfo">
    <a-form-item hide-label>
      <a-radio-group v-model="editSpCampaignInfo.targetingType" @change="changeTargetingType">
        <a-radio value="TARGETING_KEYWORD">
          <p>关键词投放</p>
          <p class="info">选择有助于您的商品针对顾客搜索展示的关键词。</p>
        </a-radio>
        <a-radio value="TARGETING_PRODUCT">
          <p>商品投放</p>
          <p class="info">选择特定商品、品类、品牌或其他商品特征来定向您的广告。</p>
        </a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item field="defaultTargetingBid" label="默认竞价：" label-col-flex="90px">
      <a-input-number style="width: 200px" v-model="editSpCampaignInfo.defaultTargetingBid" @blur="changeBid" placeholder="" allow-clear>
        <template #prepend>
          <a-button>{{ currency }}</a-button>
        </template>
      </a-input-number>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue'
  import { marketPlaceList } from '@/utils/globalData'
  import { DraftFinishStep } from '../../types'
  const props = defineProps({
    darftInfo: {
      type: Object,
      default: () => {},
    },
    shop: {
      type: Object,
      default: () => {},
    },
  })
  const emit = defineEmits(['change'])

  onMounted(() => {
    editSpCampaignInfo.value.targetingType = props.darftInfo?.targetingType || 'TARGETING_KEYWORD'
    editSpCampaignInfo.value.defaultTargetingBid = props.darftInfo?.defaultTargetingBid
    changeTargetingType()
    changeBid()
  })

  const currency = computed(() => {
    let marketplaceId = props.shop?.marketplaceId
    return marketplaceId ? marketPlaceList[marketplaceId]?.currency : 'USD'
  })
  // 根据当前流程节点判断是否可编辑
  let isDisabled = computed(() => {
    let handlerFlow = props.darftInfo?.handlerFlow || 'INIT'
    let level = DraftFinishStep[handlerFlow]
    return Number(level) > 3 ? true : false
  })
  const editSpCampaignInfo = ref<any>({})

  // 校验信息
  async function validateData() {
    return true
  }
  // 设置需要创建的数据
  function setCreateData() {
    return {
      targetingType: editSpCampaignInfo.value.targetingType,
      defaultTargetingBid: editSpCampaignInfo.value.defaultTargetingBid,
    }
  }
  // 需要实时保存的数据
  function changeTargetingType() {
    emit('change', 'manualType', editSpCampaignInfo.value.targetingType)
  }
  function changeBid() {
    emit('change', 'defaultTargetingBid', editSpCampaignInfo.value.defaultTargetingBid)
  }
  defineExpose({ validateData, setCreateData })
</script>
<style lang="less" scoped>
  .edit-header {
    background-color: var(--color-fill-2) !important;
    border-left: 2px solid rgb(var(--primary-6));
    line-height: 32px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 20px;
  }
  .arco-radio {
    line-height: 18px;
  }
  .info {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
  }
  :deep(.arco-input-prepend) {
    padding: 0;
  }
</style>
